<div id="content-detail-page" *ngIf="collection">
    <app-page-header [headerTitle]="pageTitle" [headerIcon]="pageIcon"></app-page-header>

    <div class="container-fluid content-detail-container">
        <div *ngIf="collection && collection.deprecated" class="alert alert-danger">
            <span class="pficon pficon-error-circle-o"></span>
            This item has been deprecated. We recommend that you take a look at one of <a [routerLink]="['/','search']" [queryParams]="{keywords: collection.name, deprecated: false}">
                these instead</a>.
        </div>

        <app-content-header [collection]="collection" ></app-content-header>

        <div class="row btn-row">
            <div class="col-sm-12">
                <button appLogEvent type="button" class="btn btn-default" [ngClass]="{'btn-primary': showingView === ViewTypes.detail}" tooltip="Return to main content view"
                    (click)="toggleView(ViewTypes.detail)">Details</button>
                <button appLogEvent type="button" class="btn btn-default" [ngClass]="{'btn-primary': showingView === ViewTypes.readme}"
                    tooltip="View the collection's README file" (click)="toggleView(ViewTypes.readme)">Read Me</button>
                <button appLogEvent type="button" class="btn btn-default" [ngClass]="{'btn-primary': showingView === ViewTypes.content}"
                    tooltip="View the contents of this collection" (click)="toggleView(ViewTypes.content)">Content</button>
            </div>
        </div>

        <div *ngIf="showingView === ViewTypes.detail">
            <div class="row detail display-flex">
                <div class="col-lg-8 ">
                    <card-info
                        [collection]="collection"
                        (emitView)="toggleView($event)"
                    >
                    </card-info>
                </div>

                <div class="col-lg-4">
                    <card-community-survey
                        [communityScore]="collection.community_score"
                        [qualityScore]="collection.latest_version.quality_score"
                        [contentId]="collection.id"
                        [showCommunityDetails]="showComunityDetails"
                        [showQualityDetails]="showQualityDetails"
                        [lastScored]="collection.latest_version.created"
                        [namespaceOwners]="mappedNamespaceOwners"
                        contentFormat="collection"
                        (emitDetails)="scoreDetailHandler($event)">
                    </card-community-survey>
                </div>
            </div>

            <div *ngIf="showComunityDetails" class="row detail score-detail">
                <div class="col-sm-12">
                    <pfng-card
                        [config]="config"
                        [headerTemplate]="headerTemplate">
                        <ng-template #headerTemplate>
                            <div class="card-heading">
                                <div>
                                    <div class="icon-container">
                                        <span class="fa fa-check-circle fa-2x"></span>
                                    </div>
                                    <div class="title-text">Community Score Details</div>
                                </div>
                                <div>
                                    <span (click)="toggleSurveyDetails('showComunityDetails')" class="pficon-close fa-lg close-details"></span>
                                </div>
                            </div>
                        </ng-template>

                        <div class="card-body">
                            <div *ngFor="let bar of communityScoreDetails">
                                <app-score-bar
                                    extraInfo="{{bar.count}} answer{{ bar.count !== 1 ? 's':'' }}"
                                    [score]="bar.value"
                                    [dividend]="5"
                                    [text]="bar.question"
                                    [customTextStyle]="{'width': '175px'}"
                                    >
                                </app-score-bar>
                            </div>
                        </div>
                    </pfng-card>
                </div>
            </div>
        </div>

        <div class="row row-readme" *ngIf="showingView === ViewTypes.readme">
            <div class="col-sm-12">
                <div class="readme" [innerHTML]="collection.latest_version.readme_html"></div>
            </div>
        </div>

        <div class="row" *ngIf="showingView === ViewTypes.content">
            <div class="col-sm-12">
                <card-collection-content [contents]="collection.latest_version.contents">
                </card-collection-content>
            </div>
        </div>
    </div>


<app-page-loading [loading]="pageLoading"></app-page-loading>
